import React from 'react'
import { Layout } from 'antd'
import CollapseIcon from './components/CollapseIcon'
import AvatarIcon from './components/AvatarIcon'
import { useSelector } from 'react-redux'
import type { RootState } from '../../../store'
import './style/index.scss'
import Fullscreen from './components/Fullscreen'
import AssemblySize from './components/AssemblySize'
import Theme from './components/Theme'
import BreadcrumbNav from './components/BreadcrumbNav'
import Language from './components/Language'

const LayoutHeader: React.FC = () => {
  const { Header } = Layout
  const { userInfo } = useSelector((state: RootState) => state.global)

  return (
    <Header>
      <div className="header-lf">
        <CollapseIcon />
        <BreadcrumbNav />
      </div>
      <div className="header-ri">
        <Theme />
        <Language />
        <AssemblySize />
        <Fullscreen />
        <span className="username">{userInfo?.username ?? 'admin'}</span>
        <AvatarIcon />
      </div>
    </Header>
  )
}

export default LayoutHeader